<template>
  <view class="register">
    <view class="register-content">
      <uni-section title="基本信息" type="line">
        <view class="example">
          <uni-forms ref="formRef" :modelValue="formData" label-width="100">
            <uni-forms-item label="头像" required>
              <uni-file-picker limit="1" :del-icon="false" disable-preview :imageStyles="imageStyles"
                file-mediatype="image">选择</uni-file-picker>
            </uni-forms-item>
            <uni-forms-item label="昵称" required>
              <uni-easyinput v-model="formData.name" placeholder="请输入昵称" />
            </uni-forms-item>
            <uni-forms-item label="手机" required>
              <uni-easyinput v-model="formData.age" placeholder="请输入手机号" />
            </uni-forms-item>
            <uni-forms-item label="性别" required>
              <uni-data-checkbox v-model="formData.sex" :localdata="sexs" />
            </uni-forms-item>
            <uni-forms-item label="行业领域" required>
              <uni-easyinput v-model="formData.age" placeholder="请输入行业领域" />
            </uni-forms-item>
            <uni-forms-item label="所在地区" required>
              <uni-easyinput v-model="formData.age" placeholder="请输入所在地区" />
            </uni-forms-item>
            <u-button class="form-btn"  type="primary" text="确定"  @click="handleSubmit()"></u-button>

          </uni-forms>
        </view>
      </uni-section>
    </view>

  </view>
</template>

<script>

export default {
  data() {
    return {
      imageStyles: {
        width: 64,
        height: 64,
        border: {
          color: '#ff5a5f',
          width: 2,
          style: 'dashed',
          radius: '2px'
        }
      },
      // 单选数据源
      sexs: [
        {
          text: '男',
          value: 0
        },
        {
          text: '女',
          value: 1
        },
        {
          text: '保密',
          value: 2
        }
      ],
      rules: {
        name: {
          rules: [
            {
              required: true,
              errorMessage: '姓名不能为空'
            }
          ]
        },
        age: {
          rules: [
            {
              required: true,
              errorMessage: '年龄不能为空'
            },
            {
              format: 'number',
              errorMessage: '年龄只能输入数字'
            }
          ]
        }
      },
      formData: {}
    };
  },
  onLoad(option) {},
  computed: {},
  methods: {
    handleSubmit() {}
  }
};
</script>

<style lang="scss" scoped>
.register {
  .register-content {
    padding: 30rpx;
    .form-btn {
      margin-top: 30rpx;
    }
  }
}
</style>